<template>
	<div class="index">
		<swiper :swiperData="swiperData"></swiper>
		<ul>
			<li v-for="item in list" :key="item.id" v-if="list.length">
				<img :src="item.pic" alt="">
				<span>{{ item.name }}</span>
			</li>
		</ul>
		<titles :title="'全民砍价'" @handler="toBargain"></titles>
		<div class="bargain" v-if="bargainData.result" @click="toBargain">
			<img :src="bargainData.goodsMap[bargainData.result[3].goodsId].pic" alt="">
			<div>
				<p class="title">{{ bargainData.goodsMap[bargainData.result[3].goodsId].name }}</p>
				<p class="desc">{{ bargainData.goodsMap[bargainData.result[3].goodsId].characteristic }}</p>
				<ol>
					<li>
						<span class="minPrice">
							￥{{ bargainData.goodsMap[bargainData.result[3].goodsId].minPrice }}</span>
						<span>低价</span>
					</li>
					<li>
						<span class="gray mb">
							￥{{ bargainData.goodsMap[bargainData.result[3].goodsId].originalPrice }}
						</span>
						<span class="gray">原价</span>
					</li>
					<li>
						<span class="gray mb">
							{{ bargainData.goodsMap[bargainData.result[3].goodsId].stores }}件
						</span>
						<span class="gray">限量</span>
					</li>
				</ol>
			</div>
		</div>
		<titles :title="'精选专题'" @handler="toSpecial"></titles>
		<div class="specials">
			<specialList v-for="item in specialData" :key="item.id" :item="item"></specialList>
		</div>
	</div>
</template>

<script>
import swiper from '@/components/my/swiper.vue';
import titles from '@/components/index/titles.vue';
import specialList from '@/components/index/specialList.vue';
import {requestHome, requestBargain, requestSpecial} from '@/plugins/api/home.js';

export default {
	name: 'index',
	components: {swiper, titles, specialList},
	data() {
		return {
			swiperData: [],
			bargainData: [],
			specialData: [],
			list: [
				{name: '签到', pic: require('../../assets/img/签到.png'), id: 1},
				{name: '礼券', pic: require('../../assets/img/礼券.png'), id: 2},
				{name: '砍价', pic: require('../../assets/img/砍价.png'), id: 3},
				{name: '专栏', pic: require('../../assets/img/专栏.png'), id: 4}
			]
		};
	},
	watch: {},
	computed: {},
	created() {

	},
	mounted() {
		this.getBannerData();
		this.getBargainData();
		this.getSpecial();
	},
	methods: {
		getBannerData() {
			requestHome().then(res => {
				this.swiperData = res.data;
			});
		},
		getBargainData() {
			requestBargain().then(res => {
				this.bargainData = res.data;
			});
		},
		getSpecial() {
			requestSpecial().then(res => {
				this.specialData = res.data;
			});
		},
		toBargain() {
			this.$router.push('/index/bargain');
		},
		toSpecial() {
			this.$router.push('/index/special');
		}
	}
};
</script>

<style lang="scss" scoped>
.index {
  position: relative;

  .specials {
    display: flex;
    overflow-y: auto;
  }

  ul {
    position: absolute;
    left: 0;
    top: 16.25rem;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-content: center;
    height: 6.3rem;
    border-radius: 20% 20% 0 0;
    border-bottom: 0.9rem solid #F5F5F5;

    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: space-evenly;
      font-size: 1.16rem;
      text-align: center;

      img {
        width: 2.6rem;
        margin: 0.2rem 0 0.8rem 0;
      }
    }
  }

  .bargain {
    display: flex;
    box-sizing: border-box;
    padding: 0.375rem;
    border-bottom: 0.375rem solid #F5F5F5;

    img {
      width: 6.75rem;
    }

    div {
      margin-left: 0.75rem;

      .title {
        font-size: 0.875rem;
        color: #333333;
      }

      .desc {
        font-size: 0.75rem;
        color: #b2b2b2;
        margin-top: 0.8rem;
      }

      ol {
        height: 5.65rem;
        display: flex;
        justify-content: space-between;

        li {
          display: flex;
          height: 2.25rem;
          margin-top: 3.4rem;
          font-size: 0.77451875rem;
          flex-direction: column;
          text-align: center;

          .gray {
            color: #b2b2b2;
          }

          .minPrice {
            font-weight: 700;
            color: #d00000;
            margin-bottom: 0.375rem;
          }

          .mb {
            margin-bottom: 0.375rem;
          }
        }
      }
    }
  }
}
</style>